<template>
  <!-- mixin: 可以理解成只有js的组件
  局部混入：
     定义
        export default {  data,生命周期，........}
     使用
       import xxx from '...'
       mixins:[xxx]
  全局混入：
      定义：
      import xxx from '...'
      Vue.mixin(xxx)
      效果：所有的组件都可使用混入组件内的东西，互相不产生影响
  解决问题：
    1：功能相同的js代码可以抽离出去
        代码可以包括生命周期,data,指令，过滤器.....
    2:公共的方法，数据，生命周期，指令等，都可以通过该方式封装抽离，公用时互相不产生影响
  注意点：当产生命名冲突时，以当前组件为主
 -->
  <div>
    <h1>{{ num }}</h1>
    <button @click="btnClick">点击+1</button>
  </div>
</template>
<script>
import mixinJs from './mixin/index'
export default {
  mixins: [mixinJs],
  data() {
    return {
      num: 10
    }
  },
  created() {},
  methods: {}
}
</script>
<style></style>
